iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
Modern Web

~網頁入門~系列 第 22

Day22-HTML(18) – 製作表單畫面

  • 分享至 

  • xImage
  •  

表單在網站中常常會使用到,像是平常各個網站最常使用的登入畫面、註冊時填寫資料的頁面、網購時輸入的資料 ......等等,都會使用到表單,是個很實用的功能。接著就來學學表單畫面的製作吧!

表單(畫面)製作

要製作表單,最主要的兩個標籤分別是 <form> 標籤和 <input> 標籤

<form> 標籤

將表單的內容放進 <form> </form> 裡,有點像是表格的 <table> 標籤

<form>
    表單內容
</form>

<input> 標籤

<input> 標籤可以說是表單最重要的標籤,它可以根據放入的 type 屬性產生不同的輸入元素。

  • <input type="text"> --> 單行文字輸入框
  • <input type="radio"> --> 單選選項按鈕
  • <input type="checkbox"> --> 複選選取方塊
  • <input type="email"> --> 信箱格式輸入
  • <input type="file"> --> 上傳檔案
  • <input type="password"> --> 密碼輸入框
  • <input type="submit"> --> 送出表單按鈕

表單內容包括了各種不同類型的輸入元素,例如:文本字段、輸入框、複選框、單選按鈕、提交按鈕 …….等等。

接下來就來一一介紹如何製作這些輸入元素吧!

文字輸入框

<input type="text">

<form>
    <p>name:</p>
    <input type="text" name="firstname" id="firstname"><br>
    <p>name:</p>
    <input type="text" name="lastname" id="lastname">
</form>

https://ithelp.ithome.com.tw/upload/images/20191008/20120959ZzWxHnDAoj.jpg

單選按鈕

<input type="radio">

<form>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男生</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">女生</label>
</form>

https://ithelp.ithome.com.tw/upload/images/20191008/20120959O8PvEb6qDF.jpg

<form>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="male">男生</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">女生</label>
</form>

放入 checked 就會變成預設選項
https://ithelp.ithome.com.tw/upload/images/20191008/20120959UHOsDTx1YW.jpg

<label> 中的 for 屬性 = 相關元素的 id 屬性,可以將它們綁定在一起,以便於連接後端之後的運作。

複選方塊

<input type="checkbox">

<form>
    <span>選擇顏色 : </span>
    <input type="checkbox" name="colors" value="red" id="red">
    <label for="red">紅色</label>
    <input type="checkbox" name="colors" value="blue" id="blue">
    <label for="blue">藍色</label>
    <input type="checkbox" name="colors" value="green" id="green">
    <label for="green">綠色</label>
</form>

https://ithelp.ithome.com.tw/upload/images/20191008/20120959kw9Rsegtqn.jpg

提交按鈕

<input type="submit">

定義一個按鈕,用於將表單數據提交給表單處理程序。
表單處理程序在 <form> 標籤的 action 屬性中指定,之後講到後端會再說明。

<form action="">
    <input type="submit" value="送出">
</form>

https://ithelp.ithome.com.tw/upload/images/20191008/20120959ilQDFz3uCM.jpg


另外,我們也常常會使用到下拉選單,它會用到 <select> 標籤

單選下拉選單

<option> 標籤定義一個在選擇列表中的選項

<form>
    <label for="food_menu">請選一項食物</label>
    <select name="food" id="food_menu">
        <option value="sushi" selected>壽司</option>
        <option value="bbq">燒烤</option>
        <option value="hotpot">火鍋</option>
    </select> 
</form>

放入 selected 就會變成預設選項
https://ithelp.ithome.com.tw/upload/images/20191009/20120959L2PEZVFE7i.jpg

目前表單只有出現畫面而已,想要真正能夠運作,就必須連接到後端。下一次,我們要進入 PHP 的世界,之後就會讓表單活起來囉~


上一篇
Day21-HTML(17) –響應式網頁設計(RWD) (下)
下一篇
Day23 – PHP 基礎語法
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言